手机端表格插件，做表格左右滑动

您所在的位置：网站首页 › vant table组件 › 手机端表格插件，做表格左右滑动

手机端表格插件，做表格左右滑动

2023-09-12 20:19| 来源: 网络整理| 查看: 265

表格数据太长超出屏幕时，需要做左右滑动效果，昨天发现一个插件可以很快实现，不用自己写结构样式，之前自己手写的也可以实现，手机端表格怎么做横向滑动_调调啊的博客-CSDN博客，但发现部署到企业微信之后就滑不动，才另外找的插件来写

vue-easytable 插件官网： Table Component/ Data Grid / Data Table.Support Virtual Scroll,Column Fixed,Header Fixed,Header Grouping,Filter,Sort,Cell Ellipsis,Row Expand,Row Checkbox

一，安装插件 npm install vue-easytable

二， main.js 中引入 // 引入样式 import "vue-easytable/libs/theme-default/index.css"; // 引入组件库 import VueEasytable from "vue-easytable"; Vue.use(VueEasytable);

三，页面中使用 (用的vant组件库，加了list列表上拉加载)

表格宽度是根据数据长短自适应的，所以当数据太长超出屏幕，会自动实现左右滑动，不用再写别的代码

columms数组中的 field 是后端返回的数据对应字段，title是表头的标题， key是随便写的，不要重复就行

//引入获取表格数据的api方法 import {getData} from "@/api"; created() { this.loadData(); }, data(){ list: [], pageSize: 10, pageNo: 1, loading: true, finished: false, total: "", columns: [ { field: "RcvPymtPs_AccNo", title: "机构名称", key: "a", fixed: "left" // 这一列固定 }, { field: "Rptt_Atch_ID", title: "余额", key: "b", }, { field: "IncrrptGvrnmntNsCmtTm", title: "比上日新增", key: "c", }, { field: "Mnplt_Psn_Nm", title: "比上月新增", key: "d", }, { field: "LglRprsAndESHnChgCmnt", title: "比上季度新增", key: "e", }, { field: "LGnt_Wrnt_Nm", title: "比年初新增", key: "f", }, ] } // 获取表格数据 async loadData() { const { data: result } = await getData({ pageSize：this.pageSize, pageNo:this.pageNo }); console.log(result); let rows = result.list; this.loading = false; this.total = result.count; if (rows == null || rows.length === 0) { // 加载结束 this.loading = false; this.finished = true; return; } this.list = this.list.concat(rows); console.log(this.list); if (this.list.length >= this.total) { this.finished = true; } }, onLoad() { this.pageNo += 1; this.loadData(); },

如果样式有问题，css加入这行代码，把表格宽度调宽

/deep/ .ve-table-content-wrapper { width: 21.33rem; } /deep/ .ve-table-header-th { width: 2.83rem; }

【本文地址】

手机端表格插件，做表格左右滑动

手机端表格插件，做表格左右滑动

今日新闻

推荐新闻